<template>
  <div
    class="scroll-container"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="scroll-item" v-for="(item, index) in scrollItems" :key="index">
      <div
        class="top w240px"
        @mouseenter="handleItemMouseEnter(index)"
        @mouseleave="handleItemMouseLeave(index)"
      >
        <img :src="item.image[0]" alt="" />
      </div>
      <div
        class="bottom w240px"
        @mouseenter="handleItemMouseEnter(index)"
        @mouseleave="handleItemMouseLeave(index)"
      >
        <img :src="item.image[1]" alt="" />
      </div>
    </div>
    <!-- 复制第一组元素用于无缝衔接 -->
    <div class="scroll-item" v-if="scrollItems.length > 0" :key="'clone-0'">
      <div class="top w240px" @click="goPath">
        <img :src="scrollItems[0].image[0]" alt="" />
      </div>
      <div class="bottom w240px" @click="goPath">
        <img :src="scrollItems[0].image[1]" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
// 这里可以添加一些404页面的逻辑，比如统计页面访问量等
const goPath = () => {
  router.push("/a")
}
// 修正数据格式，确保所有image属性都是数组
const scrollItems = ref([
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "tiktok教育课程",
    views: "91.3k",
    likes: "16.1k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
  {
    image: ["https://picsum.photos/200/301", "https://picsum.photos/200/301"],
    title: "本地KOL直播种草",
    views: "104.6k",
    likes: "19.2k",
  },
])

const scrollSpeed = 0.5 // 滚动速度，可调整
let isPaused = false
let scrollContainer = null
let requestId = null
let itemWidth = 300 // 每个项目的宽度，包括间距
let firstItemWidth = 0 // 第一个项目的宽度

const startScroll = () => {
  scrollContainer = document.querySelector(".scroll-container")
  if (!scrollContainer) return

  // 计算第一个项目的宽度用于无缝滚动
  const firstItem = scrollContainer.querySelector(".scroll-item")
  if (firstItem) {
    firstItemWidth = firstItem.getBoundingClientRect().width
  }

  scrollLoop()
}

const scrollLoop = () => {
  if (scrollContainer && !isPaused) {
    const oldScrollLeft = scrollContainer.scrollLeft
    scrollContainer.scrollLeft += scrollSpeed

    // 当滚动到接近第一个克隆元素时，平滑重置到起始位置
    if (scrollContainer.scrollLeft >= firstItemWidth - 1) {
      scrollContainer.scrollLeft = 0
    }

    // 优化：在重置时，调整scrollLeft以保持连续性
    if (oldScrollLeft > firstItemWidth - 1 && scrollContainer.scrollLeft < 1) {
      scrollContainer.scrollLeft = firstItemWidth - 1
    }
  }
  requestId = requestAnimationFrame(scrollLoop)
}

const handleMouseEnter = () => {
  isPaused = true
  if (requestId) {
    cancelAnimationFrame(requestId)
    requestId = null
  }
}

const handleMouseLeave = () => {
  isPaused = false
  startScroll()
}

// 处理单个 item 的鼠标移入事件
const handleItemMouseEnter = (index) => {
  const item = scrollItems.value[index]
  item.isHover = true
}

// 处理单个 item 的鼠标移出事件
const handleItemMouseLeave = (index) => {
  const item = scrollItems.value[index]
  item.isHover = false
}

onMounted(() => {
  nextTick(() => {
    startScroll()
  })
})

onUnmounted(() => {
  if (requestId) {
    cancelAnimationFrame(requestId)
  }
})
</script>

<style scoped>
.scroll-container {
  width: 100%;
  height: 660px;
  overflow: hidden;
  white-space: nowrap;
  padding: 20px;
  background: black;
  will-change: scroll-left;
}

.scroll-item {
  display: inline-block;
  width: 300px;
  margin-right: 20px;
}

.w240px {
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.w240px img {
  width: 104%;
  height: 100%;
  object-fit: cover;
  margin-left: -2%;
}

.bottom {
  margin-top: 20px;
}

.w240px:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
</style>
